import { GetQustionsApi } from "@/api";
import React, { TouchEvent, useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import OptionQuetion from "./components/OptionQuetion";
import WriteQuetion from "./components/WriteQuetion";
import "./practice.less";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

// 两种不同题型的分类
const optionType = ["one", "check", "many"];

// 做题目的页面(练习页面)
export default function Practice() {
  const location = useLocation();
  const state = location.state as IQuetionParams;
  // console.log(location); // 查看从select页面传递过来的数据
  const [list, setList] = useState<IQuestionModel[]>([]);
  useEffect(() => {
    GetQustionsApi(state).then((res) => {
      // 现在res.data是一个数组，需要我们循环渲染
      if (res.errCode === 0) {
        setList(res.data);
      }
    });
  }, []);

  // 当前是第几题
  const [index, setIndex] = useState(0);

  // 滑动事件
  let startX = 0,
    endX = 0; // 记录下开始触摸的位置和结束触摸的位置，到时只要相比较，就知道方向
  // 如果开始位置比结束位置小，就是向右，反之亦然
  // 在移动端，我们操作其实都是 touch(触摸) 事件
  // touchstart 是 触摸 开始
  const touchStart = (event: TouchEvent<HTMLDivElement>) => {
    // 注意， 这个TouchEvent 需要从react导入，不要使用原生js的TouchEvent
    // event.touches  --- 移动端是可以多指操作的，就有多个触摸点
    // 得到开始的位置
    startX = event.touches[0].clientX;
  };
  // touchmove 正在移动
  // touchend
  const touchEnd = (event: TouchEvent<HTMLDivElement>) => {
    // event.touches 在结束触摸事件里面是没有的，
    // 结束触摸事件里面需要通过 event.changedTouches 来获取触摸点
    endX = event.changedTouches[0].clientX;
    // 在滑动超过一定的距离时再切换题目
    if (Math.abs(endX - startX) < 10) return;
    // 判断，向左还是向右
    if (endX > startX) {
      if (index - 1 >= 0) setIndex(index - 1);
    } else {
      if (index + 1 < state.testNum) setIndex(index + 1);
    }
  };

  return (
    <div className="practice">
      <div className="top-head">
        <div>
          <span>{index + 1}</span>
          <span>/</span>
          <span>{state.testNum}</span>
        </div>
      </div>
      {/* 填空/编程/问答 三个类型的题目结构是一样的 */}
      {/* 单选/多选/判断 三个类型的题目结构是一样的 */}
      {/* 把6类题目分成两个组件来进行书写 */}
      {/* 判断不同的题型，进行题目的渲染 */}
      {/* 因为题目之间是使用滑动的方式切换的，所以需要一个外面的大盒子 */}
      {/* <div className="scroll" onTouchStart={touchStart} onTouchEnd={touchEnd}>
        <div
          className="list flex"
          style={{
            width: `${state.testNum * 100}vw`,
            transform: `translateX(-${(100 / state.testNum) * index}%)`,
          }}
        >
          {list.map((item) => {
            // 判断 如果是选择题型，返回一个 选择题型的组件
            if (optionType.includes(item.questionType)) {
              return <OptionQuetion key={item.id} data={item} />;
            } else {
              // 如果是需要写东西的题型，返回一个 填空的组件
              return <WriteQuetion />;
            }
          })}
        </div>
      </div> */}

      {/* 使用 swiper 实切换效果 */}
      <Swiper
        spaceBetween={50}
        slidesPerView={1}
        onSlideChange={(swiper) => setIndex(swiper.activeIndex)}
      >
        {list.map((item) => (
          <SwiperSlide key={item.id}>
            {optionType.includes(item.questionType) ? (
              <OptionQuetion data={item} />
            ) : (
              <WriteQuetion data={item} />
            )}
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}
